import React, { useEffect, useState, useRef, useMemo, useCallback } from "react"
import { View, Text, Image, Swiper, SwiperItem, Video, Navigator, CoverView, CoverImage } from "@tarojs/components"
import {
	navigateTo,
	redirectTo,
	getStorageSync,
	createVideoContext,
	pageScrollTo,
	useDidShow,
	Current
} from "@tarojs/taro"
import "./index.scss"
import "taro-ui/dist/style/components/tabs.scss"

const tabBar = {
	list: [
		{
			iconPath: require("../../assets/img/tabbar-2.png"),
			selectedIconPath: require("../../assets/img/tabbar-2-active.png"),
			pagePath: "../../pages/index/index",
			text: "首页"
		},
		{
			iconPath: require("../../assets/img/tabbar-3.png"),
			selectedIconPath: require("../../assets/img/tabbar-3-active.png"),
			pagePath: "../../pages/smb/smb", //'pages/online/online',
			text: "线上云展"
		},
		{
			iconPath: require("../../assets/img/tabbar-4.png"),
			selectedIconPath: require("../../assets/img/tabbar-4-active.png"),
			pagePath: "../../pages/fancy/fancy",
			text: "精彩瞬间"
		},
		{
			iconPath: require("../../assets/img/tabbar-5.png"),
			selectedIconPath: require("../../assets/img/tabbar-5-active.png"),
			pagePath: "../../pages/news/news",
			text: "新闻资讯"
		},
		{
			iconPath: require("../../assets/img/tabbar-1.png"),
			selectedIconPath: require("../../assets/img/tabbar-1-active.png"),
			pagePath: "../../pages/mine/mine",
			text: "我的"
		}
	],
	color: "#B1B1B1",
	selectedColor: "#333",
	backgroundColor: "#fff",
	borderStyle: "white"
}

const IndexPage = () => {
	const [selected, setSelected] = useState<number>(0)
	const [other, setOther] = useState<boolean>(false)
	useEffect(() => {
		if (Current.router?.path) {
			// console.log(Current.router?.path)
			tabBar.list.forEach((item, index) => {
				let i = item.pagePath.indexOf(Current.router?.path as string)
				// console.log(index, i)
				if (i >= 0) {
					// console.log("当前路由下标", index)
					setOther(true)
					setSelected(() => {
						return index
					})
				}
			})
		}
	}, [Current.router?.path])

	const switchTab = useCallback(
		(item) => () => {
			const url = item.pagePath
			if (TARO_ENV === "h5") {
				navigateTo({
					url: `${url}`
				})
			}
			if (TARO_ENV === "weapp") {
				redirectTo({
					url: `${url}`
				})
			}
		},
		[]
	)
	const TabView = useMemo(() => {
		return (
			<View className="tab-bar">
				<View className="tab-bar-wrap">
					{tabBar.list[0] &&
						tabBar.list.map((item, index) => {
							return (
								<View className="tab-bar-wrap-item" onClick={switchTab(item, index)} key={item.pagePath}>
									<View className="tab-bar-wrap-item-icon">
										<Image src={selected === index ? item.selectedIconPath : item.iconPath} />
									</View>
									<View
										className="tab-bar-wrap-item-btn"
										style={{ color: selected === index ? tabBar.selectedColor : tabBar.color }}
									>
										{item.text}
									</View>
								</View>
							)
						})}
				</View>
			</View>
		)
	}, [selected])
	if (other) {
		return <View>{TabView}</View>
	} else {
		return <View style={{ height: 0, width: 0 }}></View>
	}

}
export default IndexPage
